<div class="container flex-column">
  <div class="header">
    <img class="img-responsive" src="assets/images/bg02.png" alt="智能图像检测服务">
  </div>

  <div class="operations flex-row">
    <div class="goback">
      <a class="btn-goback" [routerLink]="['/home']">返回</a>
    </div>
    <button class="mismatching" (click)="mismatch()"><i nz-icon nzType="edit" style="font-size: 20px; padding: inherit"></i><span style="font-size: 15px;margin-left: 10px">纠错</span></button>
  </div>

  <div class="contents flex-row">
    <div class="content-left flex-column">
      <div class="content-title">目标检测对象</div>

      <div class="content-item flex-column border">
        <div class="content-top flex-column border-bottom" *ngIf="video == null">
          <div class="slide flex-row">
            <div class="slide-prev flex-row">
              <img class="pointer" src="assets/images/prev.png" alt="上一张" (click)="prevImage()">
            </div>

            <div class="slide-current flex-row"
                 [class.scaning]="currentDetectResult.status === 1 || currentDetectResult.status === 2">
              <img class="img-responsive"
                   *ngIf="currentDetectResult.status === 1 || currentDetectResult.status === 2 || currentDetectResult.status === 4"
                   [src]="currentDetectResult.ossKey | ossPath">

              <!--
              <img class="img-responsive" *ngIf="currentDetectResult.status === 3"
                   [src]="currentDetectResult.markedOssKey | ossPath" alt="图片">
              -->
              <img class="img-responsive" *ngIf="currentDetectResult.status === 3" #markedImage>
              <div class="scan-line"></div>
            </div>

            <div class="slide-next flex-row">
              <img class="pointer" src="assets/images/next.png" alt="下一张" (click)="nextImage()">
            </div>
          </div>

          <div class="quantity">{{pageIndex + 1}} / {{total}}</div>
        </div>

        <div class="content-top border-bottom" *ngIf="video != null" style="position:relative;">

          <div style="position:absolute;left: 0;right: 0;top: 0;bottom: 0;" app-video-canvas [video]="video"
               (frameRecognized)="onFrameRecognized($event)"></div>


          <canvas #videoFrameCanvas></canvas>

        </div>


        <div class="content-bottom flex-column" style="min-height: 400px;">
          <div class="effect flex-column">
            <div class="effect-title">
              目标检测结果

              <span *ngIf="currentDetectResult.status === 4">
                检测失败
              </span>

              <span style="top: 6px" *ngIf="currentDetectResult.status !== 4">{{ currentDetectResult.sceneType | sceneType}}</span>
            </div>

            <div class="effect-content flex-row" style="flex-wrap: wrap;">

              <div class="effect-item flex-column" [class.target-selected]="selectedTargetPolygon == targetPolygon"
                   *ngFor="let targetPolygon of currentDetectResult.targetJson;index as idx;"
                   (click)="selectTargetPolygon(targetPolygon)" style="height: auto;">
                <img class="" style="object-fit: contain;height: 76px;"
                     [src]="targetsImageBase64[idx]">
                <div style="color: white;text-align: center;font-size: 16px;">{{targetPolygon.categoryCn}}</div>
              </div>

              <img src="assets\images\detecting.gif" style="object-fit: contain"
                   *ngIf="currentDetectResult.status !== 3">


            </div>
          </div>

          <div class="similar flex-column">
            <div class="similar-title">相似图片目标</div>
            <div class="similar-content flex-row">
              <div class="similar-item flex-row" *ngFor="let similarImg of similarTargets">
                <img class="img-responsive"
                     [src]="similarImg.ossKey | sampleOssPath"
                     alt="图片">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="content-right flex-column">
      <div class="content-title matching">匹配结果</div>

      <div class="content-item flex-column">


        <!--        <div class="content-item flex-column" *ngIf="selectedTargetPolygon?.category === 'boat'" app-warship></div>
        <div class="content-item flex-column">-->
        <!--
        <div class="result flex-row">
          <div class="result-info flex-column">

          </div>
        </div>
        -->


        <!--sll
                <iframe  style="flex-grow: 1;border: 0px;" src="assets/html/055驱逐舰.htm">
                </iframe>
         -->
        <div class="content-top flex-column border" style="padding: 10px; box-sizing: border-box;">
          <div class="flex-row" style="padding: 10px 5px;color: white;justify-content: center;">
            <div class="result-info-text">匹配度</div>
            <div class="result-info-progress">
              <img src="assets/images/progress-tick.png" [ngStyle]="{left:(similarity - 100)+'%'}">
            </div>
            <div class="result-info-number">{{similarity}}%</div>
          </div>

          <!--          <iframe  style="flex-grow: 1;border: 0px; " src="assets\html\MQ-9无人机.html">
                    </iframe>-->

          <iframe *ngIf="baiKeUrl" style="flex-grow: 1;border: 0px;" [src]="baiKeUrl | safe">
          </iframe>

          <!--http://bms.hczy.top:16200/kms.wiki/#/detail?keyword=B-1轰炸机-->
        </div>


        <!--sll
                <iframe *ngIf="kmsUrl" style="flex-grow: 1;border: 0px;" [src]="kmsUrl | safe">
                </iframe>


                <div class="content-top flex-column border">
                  <div class="flex-row" style="padding: 10px 5px;color: white;justify-content: center;">

                  </div>


                </div>
        -->


        <!--sll
                  <div class="content-top flex-column border">
                    <div class="flex-row" style="padding: 10px 5px;color: white;justify-content: center;">
                      <div class="result-info-text">匹配度</div>
                      <div class="result-info-progress">
                        <img src="assets/images/progress-tick.png" [ngStyle]="{left:(similarity - 100)+'%'}">
                      </div>
                      <div class="result-info-number">{{similarity}}%</div>
                    </div>

                    <iframe *ngIf="kmsUrl" style="flex-grow: 1;border: 0px;" [src]="kmsUrl | safe">
                    </iframe>
                  </div>

                  <div class="content-bottom flex-column" style="overflow-y: auto;overflow-x: hidden;">
                    <div class="content-title matching">扩展资料</div>
                    <div class="information flex-column" *ngFor="let data of kms">
                      <ng-container
                        *ngIf="data?.url!==undefined && data?.url!==null && data?.url!==''&& data?.url!=='undefined'">
                        <a class="information-item" target="_blank" href="{{data?.url}}">{{ data.name }}</a>
                      </ng-container>
                    </div>
                    <div class="trimming"></div>
                  </div>

                </div>
        -->


        <!--        <div class="content-item flex-column" *ngIf="selectedTargetPolygon?.category === 'aeroplane'" app-jet></div>-->


        <!--
        <div class="tabs flex-column" app-warship></div>
        -->
        <!--
                  <div class="tabs flex-column" app-personage></div>

                  <div class="tabs flex-column" app-jet></div>
                  -->


        <!-- </div>-->
      </div>
    </div>
  </div>
